<template>
  <div id="center">
     <div class="center-img-wrap">
        <div style="padding-top: 50px;">
            <img :src="customerBase.avatar" class="center-img">
        </div>
     </div>
    <divider>我的动态</divider>
    <div style="text-align: center;">
      <qrcode :value="value" :fg-color="fgColor"></qrcode>
    </div>
  </div>
</template>

<script>
import { Divider, Card, Group, Cell, CellBox, Qrcode } from 'vux'
import { getCustomerId } from '../utils/utils'
import { socketClient } from '../utils/socketClient'
export default {
  components: {
    Card,
    Divider,
    Group,
    Cell,
    CellBox,
    Qrcode
  },
  data () {
    return {
      customerBase: '',
      customerId: getCustomerId(),
      value: socketClient.info,
      fgColor: socketClient.color
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  created: function () {
  },
  mounted () {
    socketClient.init()
    setInterval(() => {
      socketClient.send()
      this.value = socketClient.info
      this.fgColor = socketClient.color
    }, 2000)
    console.log(this.$router.currentRoute.query.id)
    let id = this.$router.currentRoute.query.id
    this.customerId = id.toString()
    console.log('mounted')
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'customerId': this.customerId
      },
      responseType: 'json',
      method: 'post'
    }
    let self = this
    this.$ajax('api/cms/me/customer/query', config).then(function (response) {
      console.log(response)
      self.customerBase = response.data.data.customerBase
    }).catch(function (error) {
      console.log(error)
    })
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.center-img-wrap{
    width:100%;
    height:150px;
    display:block;
    background-color: #10c5b6;
    
}

.center-img{
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    border-radius: 50px;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
</style>
